{extend name="index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">API接口日志</div>
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote quoteBox">
            <form class="layui-form searchForm" id="searchForm" method="get">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="filter_time_range" class="layui-input w300" id="laydate" placeholder="搜索时间范围">
                    </div>
                    <div class="layui-input-inline">
                        <select name="search_type">
                            <option value="">搜索全部</option>
                            <option value="url">搜索请求地址</option>
                            <option value="request_param">搜索请求参数</option>
                            <option value="response_text">搜索请求结果</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" class="layui-input" placeholder="请输入关键词">
                    </div>
                    <a class="layui-btn search_btn" data-type="reload" onclick="searchForm()">搜索</a>
                    <a class="layui-btn layui-btn-normal" onclick="resetForm()"><i class="layui-icon layui-icon-refresh-1"></i> 重置</a>
                </div>
            </form>
        </blockquote>
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm layui-btn-danger confirm layui-batch-all" data-field-id="id" data-href='{:url("delete")}'>批量删除</a>
        <a class="layui-btn layui-btn-sm layui-btn-danger confirm ajax-get" data-href='{:url("deletelog")}'>删除一个月前日志</a>
    </div>
</script>
<script type="text/html" id="titleTpl">
    <a class="layui-btn layui-btn-normal layui-btn-xs" data-href='{:url("view")}?id={{d.id}}' onclick="view(this)"><i class="layui-icon">&#xe702;</i>详情</a>
    <a href='{:url("delete")}?ids={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del">删除</a>
</script>
{/block}
{block name="script"}
<script>
    var options = {
        id: 'dataTable',
        formId: 'searchForm',
        toolbar: '#toolbarDemo',
        url: '{:url("index")}',
        page: true,   //分页设置
        sortOrder: '', //排序方式  asc: 升序、desc: 降序、null: 默认排序
        cols: [
            [
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', width: 80, title: 'ID', sort: true },
                { field: 'url', width: 340, title: '请求地址' },
                { field: 'request_param', title: '请求参数' },
                { field: 'request_method', width: 100, title: '请求方法' },
                { field: 'request_ip', width: 130, title: 'IP' },
                { field: 'create_time', width: 180, title: '请求时间' },
                { field: 'is_success', width: 80, title: '状态',align: "center", templet: '<div>{{#  if(d.is_success){ }} <button class="layui-btn layui-btn layui-btn-xs">成功</button> {{#  } else { }} <button class="layui-btn layui-btn-danger layui-btn layui-btn-xs">失败</button> {{#  } }} </div>' },
                { fixed: 'right', width: 150, title: '操作', templet: '#titleTpl' }
            ]
        ],
        done: function(res, curr, count){
            showJsonViewer(); // 参数json样式美化
        }, //表格数据渲染完的回调
    };
    // 搜索
    options.searchParams = function(){
        var formData = $.table._searchFormData();
        var search_type = $('[name="search_type"]').val();
        var search_field = search_type || 'url,request_param,response_text';
        var data = {
            search_field: search_field,
            keyword: $('input[name="keyword"]').val(),
            filter_time: 'create_time',
            filter_time_range: $("#laydate").val()
        };
        data = $.extend(formData, data);
        return data;
    };
    // 加载layui表格
    $.table.init(options);

    // laydate控件
    $.layui.laydate({
        elem: '#laydate',
        type: 'datetime',
        range: true,
    });
</script>
<script>
function view(e) {
    var url = $(e).data('href');
    layer.open({
        type: 2,
        content: [url, 'yes'],
        btn: ['关闭'],
        yes: function(index, layero){
            layer.close(index);
        },
        area: ['650px', '450px']
    });
}
</script>
<script src="__STATIC__/libs/jquery-plugins/jquery-json-viewer/jquery.json-viewer.js"></script>
<script src="__STATIC__/libs/jquery-plugins/jquery-json-viewer/jquery.json-viewer.js"></script>
<script src="__STATIC__/libs/jquery-plugins/jquery-jsonview/jquery.jsonview.js"></script>
<link rel="stylesheet" href="__STATIC__/libs/jquery-plugins/jquery-jsonview/jquery.jsonview.css">
<style>
    pre.json-renderer {
        overflow: auto;
    }
</style>
<script>
    var showJsonViewer = function () {
        function toJSON(jsonStr) {
            var jsonObj;
            try {
                if(JSON) {
                    jsonObj =  JSON.parse(jsonStr);
                }
                else {
                    jsonObj = eval('(' + $(this).html() + ')');
                }
            }
            catch (error) {
                jsonObj = null;
            }
            return jsonObj;
        }

        // 调整jsonview代码块宽度
        function setRenderWidthHeight() {
            var setWidth = $('.layui-table-header table.layui-table thead').find('th[data-field="request_param"]').width();
            $('.json-renderer').css('width', setWidth+'px');
            $jsonElem.each(function (i) {
                $(this).closest('td').css('width', setWidth+'px');
                var height = $(this).closest('td').find('.json-renderer').height();
                var index = $(this).closest('tr').index();
                height && $('.layui-table-fixed:last .layui-table-body tbody').find('tr').eq(index).height(height+10+1);
            });
            //var height2 = $('.layui-table-fixed:last .layui-table-body table').height();
            //$('.layui-table-fixed:last .layui-table-body').height(height2);
            $('.layui-table-fixed:last .layui-table-body').css('height', 'auto');
        }
        // json-viewer
        var jsonview_formattype = 0; //0: 可展开折叠;   1: 直接展开(不可折叠)
        var jsonview_libtype = 0; //0: 使用JSONView;   1: 使用jsonViewer;
        var jsonview_options = {};
        if(jsonview_libtype === 0) {
            jsonview_options = {
                collapsed: true,
                nl2br: true,
                recursive_collapser: true,
                escape: true,
            };
        }
        else {
            jsonview_options = {
                collapsed: false,
                withQuotes: true,
            };
        }
        var $jsonElem = $('.layui-table-body .layui-table td[data-field="request_param"]');
        var $jsonSelector = '[data-field="request_param"]';
        $jsonElem.each(function (i) {
            try {
                var json = toJSON( $(this).find('div').get(0).innerText );
                //console.log(json);
                if(jsonview_formattype === 0) {
                    if(json) {
                        $.each(json, function(i,n) {
                            if($.trim(n).indexOf('{')===0 || $.trim(n).indexOf('[')===0){
                                var t = toJSON(n);
                                json[i] = t ? t : n;
                            }
                        });
                    }
                }
            }
            catch (error) {
                json = null;
            }
            if(json) {
                $(this).find('div').hide();
                if(jsonview_libtype === 0) {
                    $('<pre class="json-renderer"></pre>').appendTo($(this).closest('td')).JSONView(json, jsonview_options);
                }
                else {
                    $('<pre class="json-renderer"></pre>').appendTo($(this).closest('td')).jsonViewer(json, jsonview_options);
                }
                if(jsonview_formattype === 1) {
                    var jsonRenderer = $(this).closest('td').find('.json-renderer');
                    var html = jsonRenderer.html().replace(/&amp;/g,'&');
                    jsonRenderer.html(html);
                    jsonRenderer.JSONView('toggle', 2);
                }
                setRenderWidthHeight(); //调整jsonview代码块宽度
            }
        });
        // +/-号 展开/折叠
        $('.json-renderer .collapser').click(function () {
            setTimeout(function () {
                setRenderWidthHeight(); //调整jsonview代码块宽度
            }, 1);
        });
        // 按钮全部展开
        $('.btn-expand').click(function () {
            var n = $(this).data('n') || 0;
            if(jsonview_libtype === 0) {
                if(n==0) {
                    $('.json-renderer').JSONView('toggle', 1);
                }
                else {
                    $('.json-renderer').JSONView('expand');
                }
            }
            else {
                $jsonElem.each(function (i) {
                    try {
                        var json = toJSON( $(this).find('div').get(0).innerText );
                        if(jsonview_formattype === 0) {
                            if(json) {
                                $.each(json, function(i,n) {
                                    if($.trim(n).indexOf('{')===0){
                                        var t = toJSON(n);
                                        json[i] = t ? t : n;
                                    }
                                });
                            }
                        }
                    }
                    catch (error) {
                        json = null;
                    }
                    if(json) {
                        $(this).closest('td').find('.json-renderer').remove();
                        $('<pre class="json-renderer"></pre>').appendTo($(this).closest('td')).jsonViewer(json, { collapsed: false, withQuotes: jsonview_options.withQuotes });
                        $(this).hide();
                    }
                });
            }
            setRenderWidthHeight(); //调整jsonview代码块宽高度
            $(this).data('n', n + 1);
            $(this).blur();
        });
        // 折叠
        $('.btn-collapse').click(function () {
            var n = $(this).data('n') || 0;
            if(jsonview_libtype === 0) {
                $('.json-renderer').JSONView('collapse');
            }
            else {
                $jsonElem.each(function (i) {
                    try {
                        var json = toJSON( $(this).find('div').get(0).innerText );
                        if(jsonview_formattype === 0) {
                            if(json) {
                                $.each(json, function(i,n) {
                                    if($.trim(n).indexOf('{')===0){
                                        var t = toJSON(n);
                                        json[i] = t ? t : n;
                                    }
                                });
                            }
                        }
                    }
                    catch (error) {
                        json = null;
                    }
                    if(json) {
                        $(this).closest('td').find('.json-renderer').remove();
                        $('<pre class="json-renderer"></pre>').appendTo($(this).closest('td')).jsonViewer(json, { collapsed: true, withQuotes: jsonview_options.withQuotes });
                        $(this).hide();
                    }
                });
            }
            setRenderWidthHeight(); //调整jsonview代码块宽高度
            $(this).data('n', n + 1);
            $(this).blur();
        });
        // 单项展开/折叠
        $('.btn-one-collapse-expand').off('click').on('click', function () {
            var btnObj = $(this);
            if(jsonview_libtype === 0) {
                if(btnObj.html().indexOf('展开') > -1) {
                    btnObj.closest('td').find('.json-renderer').JSONView('expand');
                    btnObj.html('折叠-');
                } else {
                    btnObj.closest('td').find('.json-renderer').JSONView('collapse');
                    btnObj.html('展开+');
                }
            }
            else {
                $(this).closest('td').find($jsonSelector).each(function (i) {
                    try {
                        var json = toJSON( $(this).get(0).innerText );
                        if(jsonview_formattype === 0) {
                            if(json) {
                                $.each(json, function(i,n) {
                                    if($.trim(n).indexOf('{')===0){
                                        var t = toJSON(n);
                                        json[i] = t ? t : n;
                                    }
                                });
                            }
                        }
                    }
                    catch (error) {
                        json = null;
                    }
                    if(json) {
                        if(btnObj.html().indexOf('展开') > -1) {
                            var isCollapsed = false;
                            btnObj.html('折叠-');
                        } else {
                            var isCollapsed = true;
                            btnObj.html('展开+');
                        }
                        $(this).closest('td').find('.json-renderer').remove();
                        $('<pre class="json-renderer"></pre>').appendTo($(this).closest('td')).jsonViewer(json, { collapsed: isCollapsed, withQuotes: jsonview_options.withQuotes });
                        $(this).hide();
                    }
                });
            }
            setRenderWidthHeight(); //调整jsonview代码块宽高度
            $(this).blur();
        });
        setRenderWidthHeight(); //调整jsonview代码块宽高度
    };
</script>
{/block}